<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例"></meta>
    <title>自定义图元-毛笔字</title>
    <!-- 0 引入js文件 -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #canvas-container {
            width: 600px;
            height: 600px;
            position: absolute;
            right: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div id="earthContainer" style="width: 100%; height: 100%; background: grey">
    </div>
    <div id="canvas-container">
        <canvas id="canvas"></canvas>
    </div>
    <script>
        var earth;
        var bgImagery;

        function startup() {
            earth = new XE.Earth('earthContainer');

            earth.sceneTree.root = {
                "children": [
                    {
                        "czmObject": {
                            "name": "默认离线影像",
                            "xbsjType": "Imagery",
                            "xbsjImageryProvider": {
                                "createTileMapServiceImageryProvider": {
                                    "url": XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
                                    "fileExtension": 'jpg',
                                },
                                "type": "createTileMapServiceImageryProvider"
                            }
                        }
                    },
                ]
            };

            var p = new XE.Obj.CustomPrimitive(earth)
            
            p.position = [116.39, 39.9, 10.0].xeptr;
            p.positions = XE.Obj.CustomPrimitive.Geometry.unitSquare.positions;
            p.sts = XE.Obj.CustomPrimitive.Geometry.unitSquare.sts;
            p.indices = XE.Obj.CustomPrimitive.Geometry.unitSquare.indices;
            p.scale = [100, 100, 1];

            p.renderState = XE.Obj.CustomPrimitive.getRenderState(true, true);

            p.vertexShaderSource = '#define FLAT\n' + p.vertexShaderSource;
            p.fragmentShaderSource = '#define FLAT\n' + p.fragmentShaderSource;

            // var imageUri = './images/earth.png';
            // Cesium.Resource.createIfNeeded(imageUri).fetchImage().then(image => {
            //     p.texture = XE.Obj.CustomPrimitive.createTextureFromImage(earth.czm.scene.context, image);
            // });

            const canvas = document.getElementById('canvas');
            p.texture = new Cesium.Texture({
                context: earth.czm.scene.context,
                width: 600,
                height: 600,
                source: canvas,
            });

            window.p = p;

            earth.czm.scene.preUpdate.addEventListener(() => {
                p.texture.copyFrom(canvas);
            });

            p.flyTo();
        }

        // 1 XE.ready()会加载Cesium.js等其他资源，注意ready()返回一个Promise对象。
        XE.ready().then(startup);          
    </script>
    <script>
    function WriteFont(id, options) {
        var self = this;
        this.canvas = document.getElementById(id);
        var obj = {
            canvas: this.canvas,
            context: this.canvas.getContext("2d"),
            isWrite: false,
            lastWriteTime: -1,
            lastWriteSpeed: 0,
            lastWriteWidth: 0,
            canvasWidth: 600,
            canvasHeight: 600,
            isShowBorder: true,
            bgColor: '#fff',
            borderWidth: 6,
            borderColor: 'red',
            lastPoint: {},
            writeWidth: 6,
            maxWriteWidth: 30,
            minWriteWidth: 1,
            writeColor: '#000'
        }
        for (var name in options) {
            obj[name] = options[name];
        }
        this.setLineWidth = function () {
            var nowTime = new Date().getTime();
            var diffTime = nowTime - obj.lastWriteTime;
            obj.lastWriteTime = nowTime;
            var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;
            if (returnNum < obj.minWriteWidth) {
                returnNum = obj.minWriteWidth;
            } else if (returnNum > obj.maxWriteWidth) {
                returnNum = obj.maxWriteWidth;
            }
            returnNum = returnNum.toFixed(2);
            obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;
        }
        this.writing = function (point) {
            obj.context.beginPath();
            obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);
            obj.context.lineTo(point.x, point.y);
            self.setLineWidth();
            obj.context.stroke();
            obj.lastPoint = point;
            obj.context.closePath();
        }
        this.writeContextStyle = function () {
            obj.context.beginPath();
            obj.context.strokeStyle = obj.writeColor;
            obj.context.lineCap = 'round';
            obj.context.lineJoin = "round";
        }
        this.writeBegin = function (point) {
            obj.isWrite = true;
            obj.lastWriteTime = new Date().getTime();
            obj.lastPoint = point;
            self.writeContextStyle();
        }
        this.writeEnd = function () {
            obj.isWrite = false;
        }
        this.canvasClear = function () {
            obj.context.save();
            obj.context.strokeStyle = '#fff';
            obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);
            if (obj.isShowBorder) {
                console.log('show border');
                obj.context.beginPath();
                var size = obj.borderWidth / 2;
                //画外面的框
                obj.context.moveTo(size, size);
                obj.context.lineTo(obj.canvasWidth - size, size);
                obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);
                obj.context.lineTo(size, obj.canvasHeight - size);
                obj.context.closePath();
                obj.context.lineWidth = obj.borderWidth;
                obj.context.strokeStyle = obj.borderColor;
                obj.context.stroke();
                //画里面的框
                obj.context.moveTo(0, 0);
                obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);
                obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
                obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
                obj.context.lineTo(0, obj.canvasHeight / 2);
                obj.context.lineTo(0, obj.canvasHeight);
                obj.context.lineTo(obj.canvasWidth, 0);
                obj.context.lineTo(obj.canvasWidth / 2, 0);
                obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);
                obj.context.stroke();
            }
            obj.context.restore();
        }
        this.canvasInit = function () {
            this.canvas.width = obj.canvasWidth;
            this.canvas.height = obj.canvasHeight;
        }
        this.canvas.addEventListener('mousedown', function (e) {
            var point = {
                x: e.offsetX || e.clientX,
                y: e.offsetY || e.clientY
            };
            self.writeBegin(point);
        });
        this.canvas.addEventListener('mouseup', function (e) {
            var point = {
                x: e.offsetX,
                y: e.offsetY
            };
            self.writeEnd(point);
        });
        this.canvas.addEventListener('mouseleave', function (e) {
            var point = {
                x: e.offsetX,
                y: e.offsetY
            };
            self.writeEnd(point);
        });
        this.canvas.addEventListener('mousemove', function (e) {
            if (obj.isWrite) {
                var point = {
                    x: e.offsetX,
                    y: e.offsetY
                };
                self.writing(point);
            }
        });
        this.canvasInit();
        this.canvasClear();
        this.option = obj;
        obj.control = {
            clearCanvas: self.canvasClear
        };
    }

    var writeCanvas = new WriteFont('canvas', {
        borderWidth: 10,
        borderColor: '#ff6666'
    });

    
    </script>
</body>

</html>